import React, { Component } from "react";

export default class Formtwo extends Component {
	//状态 数据
	state = {
		username: "",
		pwd: "",
		email: "",
	};

	//非受控组件:获取的表单数据 不被state管理
	//受控组件  :获取的表单数据 被state管理

	//创建获取 username方法
	// getusername = (e) => {
	// 	this.setState({
	// 		username: e.target.value,
	// 	});
	// };

	// //创建获取pwd方法
	// getpwd = (e) => {
	// 	this.setState({
	// 		pwd: e.target.value,
	// 	});
	// };

	//获取表单数据
	getform = (type) => {
		return (e) => {
			this.setState({
				[type]: e.target.value,
			});
		};
	};

	//创建登陆方法
	login = () => {
		alert(
			`账号是:${this.state.username},密码是:${this.state.pwd},邮箱是:${this.state.email}`
		);
	};

	//清空数据方法
	clear = () => {
		this.setState({
			username: "",
			pwd: "",
		});
	};

	render() {
		return (
			<>
				<h2>受控组件</h2>
				<input
					type="text"
					value={this.state.username}
					onChange={this.getform("username")}
					placeholder="账号"
				/>
				<br />
				<br />
				<input
					type="text"
					value={this.state.pwd}
					onChange={this.getform("pwd")}
					placeholder="密码"
				/>
				<br />
				<br />
				<input
					type="text"
					value={this.state.email}
					onChange={this.getform("email")}
					placeholder="邮箱"
				/>
				<br />
				<br />
				<button onClick={this.login}>登陆</button>
				<button onClick={this.clear}>重置</button>
			</>
		);
	}
}
